<template>
  <div class="email-settings">
    <div class="top-title">邮件配置表</div>
    <!-- 表单容器添加类名，用于限制宽度 -->
    <el-form :model="form" label-width="100px" class="form-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="SMTP服务名">
            <el-input v-model="form.smtpService" placeholder="例如：smtp.qq.com" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="端口号">
            <el-select v-model="form.port" placeholder="请选择端口">
              <el-option label="25（默认）" value="25" />
              <el-option label="465（SSL）" value="465" />
              <el-option label="587（TLS）" value="587" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="加密方式">
            <el-select v-model="form.encryption" placeholder="请选择加密方式">
              <el-option label="无" value="none" />
              <el-option label="SSL" value="ssl" />
              <el-option label="TLS" value="tls" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发件人邮箱">
            <el-input v-model="form.senderEmail" placeholder="例如：xxx@qq.com" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="邮箱密码">
            <el-input v-model="form.emailPwd" type="password" placeholder="请输入密码/授权码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回复邮箱">
            <el-input v-model="form.replyEmail" placeholder="默认与发件人一致" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="form-actions">
        <el-col :span="24" style="text-align: center;">
          <el-button type=" btn-base save-btn">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  smtpService: '',
  port: '',
  encryption: '',
  senderEmail: '',
  emailPwd: '',
  replyEmail: ''
});
</script>

<style scoped lang="scss">
.email-settings {
  padding: 20px;
  background-color: white;

  .top-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
  }

  .form-container {
    max-width: 800px;

  }
  :deep(.el-input),
  :deep(.el-select) {
    width: 100%;
  }

  .form-actions {
    margin-top: 20px;
  }
}
</style>
